<template>
  <div class="stage-config">
    <div class="config-left">
      <div class="config-title">
        <i>项目阶段</i>
      </div>
      <div class="stage-list">
        <el-scrollbar height="62vh">
          <ul class="stage-list" id="stage-list" ref="minStageRef">
            <li
              class="stage-item cursor-move handle"
              :class="item.isActive ? 'stage-item-active' : ''"
              v-for="(item, index) in stageListOrigin.data"
              :key="item.id + 'stage'"
              @click="() => activeHandler(index)"
            >
              <div class="drop-icon">
                <el-icon><Rank /></el-icon>
                <el-icon class="icon" @click.stop="() => delHandler(index)"><CloseBold /></el-icon>
              </div>
              <div class="stage-cot">
                <div class="title-box">
                  <el-input placeholder="请输入内容" v-model="item.name" />
                  <span class="title-cot">{{ item.name }}</span>
                </div>
              </div>
              <div class="stage-time">
                <UpDate class="stage-time" type="date" :config="timeConfig(item)" v-model:value="item.time">
                  <el-icon><Calendar /></el-icon>
                  <span>{{ item.time[0] ? dayJs(item.time[0]).format("YYYY/MM/DD") : "--" }}</span>
                  <span class="stage-line">-</span>
                  <span>{{ item.time[1] ? dayJs(item.time[1]).format("YYYY/MM/DD") : "--" }}</span>
                </UpDate>
              </div>
            </li>
          </ul>
          <div class="add-btn-bt">
            <el-button icon="Plus" type="default" @click="addHandler">新增</el-button>
          </div>
        </el-scrollbar>
      </div>
    </div>
    <div class="config-right">
      <span class="config-title">阶段任务</span>
      <div class="task-list-wrap">
        <el-scrollbar height="60vh">
          <ul class="task-list" id="task-list" v-show="subStage && subStage.length">
            <li class="task-item cursor-move" v-for="(item, index) in subStage" :key="item.id">
              <div class="drop-icon">
                <el-icon><Rank /></el-icon>
                <el-icon @click="() => delTaskHandler(index)"><CloseBold /></el-icon>
              </div>
              <div class="cot-task">
                <div class="title-task title-box">
                  <el-input placeholder="请输入内容" v-model="item.name" />
                  <span class="title-cot">{{ item.name }}</span>
                </div>
                <div class="item-wrap mb20">
                  <span class="title-task-sub">计划时间</span>
                  <UpDate class="item-time" type="date" :config="timeConfig(item)" v-model:value="item.time">
                    <el-icon><Calendar /></el-icon>
                    <span>{{ item.time[0] ? dayJs(item.time[0]).format("YYYY/MM/DD") : "--" }}</span>
                    <span class="stage-line">-</span>
                    <span>{{ item.time[1] ? dayJs(item.time[1]).format("YYYY/MM/DD") : "--" }}</span>
                  </UpDate>
                </div>
                <div class="item-wrap item-wrap-jfu mb20">
                  <span class="title-task-sub">负责人</span>
                  <div class="select-box-wrap">
                    <div class="select-box">
                      <el-select v-model="item.userId" filterable placeholder="请选择" @change="changeUserFn(item)">
                        <el-option
                          :key="idex + 'select'"
                          v-for="(iem, idex) in userList"
                          :label="iem.name"
                          :value="iem.id"
                        ></el-option>
                      </el-select>
                    </div>
                  </div>
                </div>
                <div class="item-wrap item-wrap-jfu mb20">
                  <span class="title-task-sub">里程碑</span>
                  <el-switch v-model="item.milestone" :inactive-value="0" :active-value="1"></el-switch>
                </div>
                <div class="item-wrap item-wrap-jfu">
                  <span class="title-task-sub">交付物</span>
                  <div class="select-box-wrap">
                    <div class="select-box" v-for="(itm, idex) in item.outcome" :key="idex">
                      <div class="select-box-item">
                        <el-select v-model="itm.typeId" filterable placeholder="请选择" @change="outcomeHandler(itm)">
                          <el-option
                            :key="iex + 'select'"
                            v-for="(iem, iex) in getDict('deliverables')"
                            :label="iem.name"
                            :value="iem.id"
                          ></el-option>
                        </el-select>
                        <el-icon @click="() => delTaskFileHandler(item, index)"><CloseBold /></el-icon>
                      </div>
                    </div>
                    <div class="add-btn" @click="() => addTaskFileHandler(item)">
                      <el-icon><Plus /></el-icon>
                      <span>新增</span>
                    </div>
                  </div>
                </div>
              </div>
              <!-- <el-icon class="del-icon"><CloseBold /></el-icon> -->
            </li>
          </ul>
          <div class="add-btn-bt add-btn-bt-right" v-show="stageListOrigin.data.length">
            <el-button icon="Plus" type="default" @click="addTaskHandler">新增</el-button>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, computed, watch, reactive, onMounted } from "vue";
import { useDraggable } from "vue-draggable-plus";
import UpDate from "./UpDate/index.vue";
import dayJs from "dayjs";
import { useDict } from "@/hooks/useDict";
// 变量
const props = defineProps({ stageList: { type: Array, default: () => [] }, userList: { type: Array, default: () => [] } });
let stageListOrigin = reactive({
  data: []
});
const minStageRef = ref(null);
let subDragObj = ref(null);
let mainDragObj = ref(null);
// hook
const { getDict } = useDict(["deliverables"]);
// computed
const timeConfig = computed(() => data => {
  return {
    data,
    key: "time",
    api: "",
    attributes: {
      type: "daterange",
      format: "YYYY-MM-DD",
      valueFormat: "YYYY-MM-DD HH:mm:ss"
    }
  };
});
const subStage = computed(() => {
  return stageListOrigin.data[stageListOrigin.data.findIndex(item => item.isActive)]?.projectTaskModel;
});
const parentId = computed(() => {
  return stageListOrigin.data[stageListOrigin.data.findIndex(item => item.isActive)]?.id;
});
// watch
watch(
  () => props.stageList,
  () => {
    stageListOrigin.data = initStageList(props.stageList);
    if (mainDragObj.value) {
      mainDragObj.value.destroy();
      mainDragObj.value = null;
    }
    mainDragObj.value = useDraggable(minStageRef, stageListOrigin.data, { animation: 150, handle: ".handle" });
  },
  {
    immediate: true,
    deep: true
  }
);
watch(
  () => subStage.value,
  () => {
    if (subDragObj.value) {
      subDragObj.value.destroy();
      subDragObj.value = null;
    }
    subDragObj.value = useDraggable("#task-list", subStage.value, {
      animation: 150
    });
  }
);
// 方法
const changeUserFn = (item: any) => {
  const user = props.userList.find(itm => itm.id == item.userId);
  if (user) item.userName = user.name;
};
const outcomeHandler = itm => {
  const obj = getDict("deliverables").find(item => item.id == itm.typeId);
  if (obj) {
    itm.typeName = obj.name;
    itm.remark = obj.remark;
  }
  console.log(itm);
};
function initStageList(data) {
  data = JSON.parse(JSON.stringify(data));
  return data.map((item, index) => {
    item.isActive = index === 0;
    item.time = [item.planStartTime, item.planEndTime];
    if (item.templateTaskModel) {
      item.projectTaskModel = JSON.parse(JSON.stringify(item.templateTaskModel));
      delete item.templateTaskModel;
    }
    item.projectTaskModel.forEach(item => {
      item.time = [item.planStartTime, item.planEndTime];
      delete item.templateTaskModel;
    });
    return item;
  });
}

function endStageList(data) {
  data.forEach(item => {
    delete item?.isActive;
    item.planStartTime = item.time[0];
    item.planEndTime = item.time[1];
    delete item.time;
    if (item.projectTaskModel) endStageList(item.projectTaskModel);
  });
  return data;
}

const activeHandler = index => {
  stageListOrigin.data.forEach((item, i) => {
    item.isActive = i === index;
  });
};
const addHandler = () => {
  stageListOrigin.data.push({
    id: stageListOrigin.data.length - 1,
    parentId: "",
    name: "",
    isActive: true,
    time: [],
    projectTaskModel: []
  });
  activeHandler(stageListOrigin.data.length - 1);
};

const delHandler = index => {
  stageListOrigin.data.splice(index, 1);
  if (stageListOrigin.data.length && !stageListOrigin.data.find(item => item.isActive)) {
    activeHandler(0);
  }
};

const addTaskHandler = () => {
  subStage.value.push({
    id: subStage.value.length - 1,
    name: "",
    time: [],
    outcome: [],
    parentId
  });
};
const delTaskHandler = index => {
  subStage.value.splice(index, 1);
};

const addTaskFileHandler = item => {
  console.log(item);
  if (!item.outcome) item.outcome = [];
  item.outcome.push({
    typeId: "",
    typeName: ""
  });
};
const delTaskFileHandler = (item, index) => {
  item.outcome.splice(index, 1);
};
onMounted(() => {
  // console.log(minStageRef, stageListOrigin.data);
});
// 返回
defineExpose({
  getValue: () => {
    // console.log(stageListOrigin.data);
    return endStageList(stageListOrigin.data);
  }
});
</script>
<style lang="scss" scoped>
.stage-list,
.stage-item {
  padding: 0;
  margin: 0;
  list-style: none;
}
p {
  margin: 0;
}
i {
  font-style: normal;
}
.mb20 {
  margin-bottom: 20px;
}
.stage-config {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  height: 100%;
  border-bottom: 1px solid #eeeeee;
  .config-title {
    box-sizing: border-box;
    display: flex;
    flex: 0 0 72px;
    align-items: center;
    justify-content: space-between;
    padding-right: 38px;
    font-size: 16px;
    font-weight: 400;
    line-height: 72px;
    color: #333333;
    text-indent: 30px;
    border-bottom: 1px solid #eeeeee;
    .el-icon {
      cursor: pointer;
    }
  }
  .config-left {
    display: flex;
    flex: 0 0 16.4%;
    flex-flow: column nowrap;
    overflow: hidden;
    border-right: 1px solid #eeeeee;
    .stage-list {
      flex: 1;
      .stage-item {
        position: relative;
        box-sizing: border-box;
        display: flex;
        flex-flow: column nowrap;
        padding: 16px;
        margin: 20px 30px;
        cursor: pointer;
        background: $project-background;
        border-radius: 6px;
        .stage-cot {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .stage-time {
          display: flex;
          align-items: center;
          margin-top: 0;
          font-size: 14px;
          color: #999999;
          :deep(.el-date-editor) {
            .el-range-input {
              cursor: pointer;
            }
          }
          .el-icon {
            margin-right: 4px;
          }
          .stage-line {
            padding: 0 6px;
          }
        }
        &:hover {
          .title-box {
            .el-input {
              display: block;
            }
            .title-cot {
              display: none;
            }
          }
        }
      }
      .drop-icon {
        display: flex;
        flex: 1;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 5px;
      }
      .title-box {
        position: relative;
        display: flex;
        flex: 3;
        align-items: center;
        height: 46px;
        overflow: hidden;
        font-size: 16px;
        font-weight: 600;

        // line-height: 46px;
        color: #333333;
        text-align: left;
        :deep(.el-input) {
          display: block;
          font-size: 16px;
          border: 0;
          box-shadow: none;
          .el-input__wrapper {
            width: 100%;

            // background: rgb(247 252 254);
            padding: 0;
            border: 0;
            box-shadow: none;
            .el-input__inner {
              height: 32px;
              padding: 0;
              font-size: 16px;
              font-weight: 600;
              line-height: 32px;
              color: #333333;
              border: 0;
              box-shadow: none;
            }
          }
          & input::placeholder {
            font-weight: 400;
          }
        }
        .title-cot {
          display: none;
          width: 100%;
          height: 32px;
          overflow: hidden;
          line-height: 32px;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .stage-item-active {
        box-sizing: border-box;
        outline: 1px solid var(--el-color-primary);
      }
    }
  }
  .add-btn-bt {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 30px;
    .el-button {
      width: 100%;
      height: 120px;
    }
  }
  .add-btn-bt-right {
    margin: 20px;
  }
  .config-right {
    display: flex;
    flex: 1;
    flex-flow: column nowrap;
    overflow: hidden;
    .task-list {
      flex: 1;
      padding: 20px;
      padding-bottom: 0;
      margin: 0;
      .task-item {
        position: relative;
        display: flex;
        flex-flow: column nowrap;
        padding: 20px;
        margin-bottom: 20px;
        cursor: pointer;
        background: $project-background;
        .drop-icon {
          display: flex;
          flex: 1;
          justify-content: space-between;
          width: 100%;
          margin-bottom: 10px;
        }
        .item-ord {
          font-size: 16px;
          font-weight: 400;
          color: #333333;
        }
        .cot-task {
          display: flex;
          flex: 1;
          flex-flow: column nowrap;

          // margin-left: 40px;
          .title-task {
            margin-bottom: 10px;
            font-size: 16px;
            font-weight: 400;
            color: #333333;
            .el-input {
              display: none;
              font-size: 16px;
            }
            .title-cot {
              display: block;
            }
          }
          .title-box {
            display: flex;
            align-items: center;
            height: 40px;
            overflow: hidden;
            font-size: 16px;
            font-weight: 400;

            // line-height: 40px;
            color: #333333;
            text-align: left;
            :deep(.el-input) {
              display: block;
              .el-input__wrapper {
                width: 100%;
                padding: 0;
                border: 0;
                box-shadow: none;
                .el-input__inner {
                  height: 32px;
                  font-size: 16px;
                  font-weight: 400;
                  line-height: 32px;
                  color: #333333;
                }
              }
              & input::placeholder {
                font-weight: 400;
              }
            }
            .title-cot {
              display: none;
              width: 100%;
              height: 32px;
              overflow: hidden;
              line-height: 32px;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          .item-wrap {
            display: flex;
            align-items: flex-start;
            .title-task-sub {
              flex: 0 0 60px;
              margin-right: 20px;
              font-size: 14px;
              font-weight: 400;
              color: #999999;
              text-align: right;
            }
            .item-time {
              display: flex;
              align-items: center;
              font-size: 14px;
              font-weight: 400;
              color: #333333;
              .el-icon {
                margin-right: 4px;
              }
              :deep(.el-date-editor) {
                .el-range-input {
                  cursor: pointer;
                }
              }
              .stage-line {
                padding: 0 6px;
              }
            }
            .select-box-wrap {
              position: relative;
              top: -4px;
              display: flex;
              flex-flow: row wrap;
              gap: 10px 50px;
              align-items: center;
            }
            .select-box {
              :deep(.el-input__wrapper) {
                display: flex;
                flex-direction: row-reverse;
                padding: 0;
                background: transparent;
                box-shadow: none;
                .el-input__suffix-inner > :first-child {
                  margin-right: 10px;
                  margin-left: 0;
                }
                .el-input__inner {
                  width: auto;
                  font-size: 14px;
                  font-weight: 600;
                  color: rgb(51 51 51 / 100%);
                }
              }
              :deep(.el-select) {
                width: auto;
                min-width: 100px;
                .el-input.is-focus {
                  .el-input__wrapper {
                    box-shadow: none !important;
                  }
                }
                .el-input__wrapper.is-focus {
                  box-shadow: none !important;
                }
              }
              .select-box-item {
                position: relative;
                gap: 50px;
                .el-icon {
                  position: absolute;
                  top: 0;
                  right: 0;
                  display: none;
                  cursor: pointer;
                }
                &:hover {
                  .el-icon {
                    display: block;
                  }
                }
              }
            }
            .add-btn {
              position: relative;
              top: 4px;
              display: flex;
              align-items: center;
              margin-left: 10px;
              font-size: 14px;
              font-weight: 400;
              color: #333333;
              cursor: pointer;
              span:last-child {
                margin-left: 5px;
              }
              &:hover {
                color: var(--el-color-primary);
                :deep(.el-icon) {
                  color: var(--el-color-primary);
                }
              }
            }
            .el-switch {
              height: auto;
            }
          }
        }
        .del-icon {
          position: absolute;
          top: 20px;
          right: 20px;
          cursor: pointer;
        }
        &:hover {
          .title-box {
            .el-input {
              display: block;
            }
            .title-cot {
              display: none;
            }
          }
        }
      }
    }
  }
}
</style>
